<template>
	<view class="bBtn_p_b140">
		<view class="contina w m_t_10">
			<view class="card">
				<view class="title">
					基本信息
				</view>
				<u--form labelPosition="left" :model="form" labelWidth="120" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="项目名称" prop="form.name" borderBottom>
						<u--input v-model="form.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入项目名称" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<!-- <u-form-item label="项目编号" prop="form.no" borderBottom>
						<u--input v-model="form.no" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入项目名称" border="none" inputAlign="right">
						</u--input>
					</u-form-item> -->
					<u-form-item label="项目类型" prop="form.type_id" borderBottom @click="showAction(1)">
						<u--input v-model="form.type.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择项目类型" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="计划开始时间" prop="form.start_at" borderBottom @click="showDate(1)">
						<u--input v-model="form.start_at" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择计划开始时间" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="计划竣工时间" prop="form.pre_end_at" borderBottom @click="showDate(2)">
						<u--input v-model="form.pre_end_at" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择计划竣工时间" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="竣工时间" prop="form.end_at" borderBottom @click="showDate(3)">
						<u--input v-model="form.end_at" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择竣工时间" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="项目所属区域" prop="form.area" borderBottom @click="show3=true">
						<u--input v-model="form.area" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择项目所属区域" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="项目地址" prop="form.address" borderBottom>
						<u--input v-model="form.address" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入项目详细地址" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="工程工期" prop="form.work_duration" borderBottom>
						<u--input v-model="form.work_duration" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入工程工期" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="工程量估算m²" prop="form.quantities" borderBottom>
						<u--input v-model="form.quantities" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入工程量" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="工程造价" prop="form.price" borderBottom>
						<u--input v-model="form.price" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入预期利润" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="预期利润" prop="form.profit" borderBottom>
						<u--input v-model="form.profit" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入预期利润" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="质量等级" prop="form.level" borderBottom>
						<u--input v-model="form.level" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入质量等级" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="项目状态" prop="form.status" borderBottom @click="showAction(2)">
						<u--input v-model="show_status" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择项目状态" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="业务性质" prop="form.nature_id" borderBottom @click="showAction(3)">
						<u--input v-model="form.nature.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择业务性质" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="项目负责人" prop="form.staff_id" borderBottom @click="showAction(4)">
						<u--input v-model="form.staff.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择项目负责人" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
			</view>
			<view class="card">
				<view class="title">
					甲方单位
				</view>
				<u--form labelPosition="left" :model="form" labelWidth="120" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="甲方单位" prop="form.build_cooperative_id" borderBottom @click="showAction(5)">
						<u--input v-model="form.build_cooperative.name"
							placeholder-style="text-align: right;color:#999999" disabledColor="#ffffff"
							placeholder="请选择甲方单位" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="联系人" prop="form.employer_name" borderBottom>
						<u--input v-model="form.employer_name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入联系人姓名" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="联系方式" prop="form.employer_phone" borderBottom>
						<u--input v-model="form.employer_phone" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入联系方式" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="联系地址" prop="form.employer_address" borderBottom>
						<u--input v-model="form.employer_address" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入联系地址" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="card">
				<view class="title">
					立项人基本资料
				</view>
				<u--form labelPosition="left" :model="form" labelWidth="120" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="立项人" prop="form.created_name" borderBottom>
						<u--input v-model="form.created_name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入立项人姓名" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="部门" prop="form.dept_id" borderBottom @click="showAction(6)">
						<u--input v-model="form.dept.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择立项人所在部门" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="联系电话" prop="form.created_phone" borderBottom>
						<u--input v-model="form.created_phone" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入联系电话" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
					<u-form-item label="备注" prop="form.remark" borderBottom>
						<u--input v-model="form.remark" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请输入备注信息" border="none" inputAlign="right">
						</u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<flooterCom>
			<template #btn>
				<view class="flex_a_c" style="justify-content: space-around;">
					<view class="cale btns" @click="back">取消</view>
					<view class="save btns" @click="submit">保存</view>
				</view>
			</template>
		</flooterCom>
		<u-datetime-picker :show="show" mode="date" v-model="datetime" @cancel="show=false"
			@confirm="show=false"></u-datetime-picker>
		<u-picker :show="show2" :columns="actions" @cancel="show2=false" @confirm="selectAction"
			keyName="name"></u-picker>
		<cc-selectDity :province="province" :city="city" :area="area" :show="show3" @sureSelectArea="onsetCity"
			@hideShow="show3=false" @changeClick="changeClick"></cc-selectDity>
	</view>
</template>

<script>
	import flooterCom from "@/compoment/flooterCom.vue"
	export default {
		data() {
			return {
				labelStyle: {
					display: 'flex',
					justifyContent: 'spaceBetween'
				},
				edit: 0,
				province: "北京",
				city: "北京市",
				area: "东城区",
				show: false,
				show2: false,
				show3: false,
				datetime: '',
				actionType: 1,
				dateType: 1,
				show_status: '',
				actions: [],
				op1: [],
				op2: [{
					value: 0,
					name: '未开始',
				}, {
					value: 1,
					name: '立项分析',
				}, {
					value: 2,
					name: '信息立项',
				}, {
					value: 3,
					name: '资格审核',
				}, {
					value: 4,
					name: '放弃',
				}, {
					value: 5,
					name: '竣工',
				}, ],
				status: ['未开始', '立项分析', '信息立项', '资格审核', '放弃', '竣工'],
				op3: [],
				op4: [],
				op5: [],
				op6: [],
				form: {
					address: '',
					area: '',
					bidding_id: '',
					build_cooperative_id: '',
					corp_id: '',
					employer_address: '',
					employer_name: '',
					employer_phone: '',
					end_at: '',
					file: '',
					introduce: '',
					level: '',
					name: '',
					no: '',
					pre_end_at: '',
					price: '',
					profit: '',
					quantities: '',
					remark: '',
					staff: '',
					staff_id: '',
					start_at: '',
					status: '',
					supervision_cooperative_id: '',
					type_id: '',
					work: '',
					work_duration: '',
					nature_id: '',
					created_name: '',
					dept_id: '',
					created_phone: '',
					type: {
						name: ''
					},
					staff: {
						name: ''
					},
					nature: {
						name: ''
					},
					build_cooperative: {
						name: ''
					},
					dept: {
						name: ''
					},
				}

			}
		},
		components: {
			flooterCom
		},
		onLoad(option) {
			this.edit = option.edit
			if (this.edit == 1) {
				this.getDetail(option.id)
			}
			uni.setNavigationBarTitle({
				title: this.edit == 1 ? '编辑项目' : '新增项目'
			})
		},
		created() {
			this.$api.homeApi.getProjectType().then(res => {
				this.op1 = res.list
			})
			this.$api.homeApi.getProjectNature().then(res => {
				this.op3 = res.list
			})
			this.$api.homeApi.getStaff().then(res => {
				this.op4 = res.list
			})
			this.$api.homeApi.getCorpCooperative().then(res => {
				this.op5 = res.list
			})
			this.$api.homeApi.getDeptList().then(res => {
				this.op6 = res.list
			})
		},
		watch: {
			datetime(n, o) {
				let d = this.$dayjs(n ? n : o).format('YYYY-MM-DD');
				if (this.dateType == 1) {
					this.form.start_at = d
				}
				if (this.dateType == 2) {
					this.form.pre_end_at = d
				}
				if (this.dateType == 3) {
					this.form.end_at = d
				}
				this.datetime = ''
			}
		},
		methods: {
			async getDetail(id) {
				this.form = await this.$api.projectApi.detail({
					id: id
				})
				this.show_status = this.status[this.form.status]
			},
			selectAction(e) {
				let v = e.value[0]
				if (this.actionType == 1) {
					this.form.type_id = v.id
					this.form.type.name = v.name
				}
				if (this.actionType == 2) {
					this.form.status = v.value
					this.show_status = v.name
				}
				if (this.actionType == 3) {
					this.form.nature_id = v.id
					this.form.nature.name = v.name
				}
				if (this.actionType == 4) {
					this.form.staff_id = v.id
					this.form.staff.name = v.name
				}
				if (this.actionType == 5) {
					this.form.build_cooperative_id = v.id
					this.form.build_cooperative.name = v.name
				}
				if (this.actionType == 6) {
					this.form.dept_id = v.id
					this.form.dept.name = v.name
				}
				this.show2 = false
			},
			showAction(type) {
				this.actionType = type
				this.actions = []
				if (type == 1) {
					this.actions.push(this.op1)
				}
				if (type == 2) {
					this.actions.push(this.op2)
				}
				if (type == 3) {
					this.actions.push(this.op3)
				}
				if (type == 4) {
					this.actions.push(this.op4)
				}
				if (type == 5) {
					this.actions.push(this.op5)
				}
				if (type == 6) {
					this.actions.push(this.op6)
				}
				this.show2 = true
			},
			showDate(type) {
				this.dateType = type
				this.show = true
			},
			changeClick(value, value2, value3, code) {
				this.province = value;
				this.city = value2;
				this.area = value3;
			},
			onsetCity(e) {
				let data = e.detail.target.dataset;
				this.show3 = false
				this.form.area = data.province + data.city + data.area;
			},
			back() {
				uni.navigateBack()
			},
			async submit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
					if (this.edit == 1) {
						await this.$api.projectApi.update(this.form)
					} else {
						await this.$api.projectApi.add(this.form)
					}
					this.$fun.tipBack('保存成功')
				try {
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	.contina {
		.card {
			margin-bottom: 20rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #000000;
			}

		}

		::v-deep .u-form-item__body {
			padding: 30rpx 0 !important;




			.par_upload {
				width: 100rpx;
				height: 100rpx;
				background-color: #F4F5F7;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				margin-left: auto;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		::v-deep .u-form-item__body__left__content__label {
			justify-content: space-between !important;
			width: 100%;
			font-size: 28rpx;
			font-weight: 400;
			color: #3D3D3D;
		}
	}

	.btns {
		width: 330rpx;
		height: 90rpx;
		border-radius: 10px 10px 10px 10px;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10px 10px 10px 10px;
	}

	.cale {
		color: #FF0000;
		border: 1px solid #F07878;
	}

	.save {
		color: #fff;
		background-color: #0074FF;
	}
</style>